<template>
	<view class="preview-list">
		<ul>
			<li v-for="(item,index) in evalList" :key="index">
				<view class="eval_top">
					<dl>
						<dt>
							<image :src="item.head" mode=""></image>
						</dt>
						<dd>
							<view class="eval_title">
								<p>{{item.name}}</p>
								<text>{{ $t('check.in') }} {{item.checkin_time}}</text>
							</view>
							<view class="eval_rate">
								<text>rate</text>
								<u-rate :count="5" v-model="item.score" gutter="1">></u-rate>
							</view>

						</dd>
					</dl>
				</view>
				<p>{{item.content}}</p>
				<view class="eval_img" v-if="item.imgurl">
					<image v-for="(items,i) in item.imgurl.split(',')" :key="i" :src="items" mode="aspectFill"></image>
				</view>
				<view class="eval_huifu" v-if="!item.reply" @click.stop="handleReply(item)">
					Reply
				</view>
				<view class="eval_reply" v-if="item.reply">
					{{item.reply}}
				</view>
			</li>
		</ul>
		<view class="empty" v-if="evalList.length<=0">
			<image src="/static/list.png" mode=""></image>
			<p>暂无评价~</p>
		</view>
	</view>
</template>

<script>
	import {
		goBack,
		showAlert,
		showMessage,
		showFailure
	} from '../../lib/helper';
	import {
		getReviewList
	} from '../../lib/service';
	export default {
		data() {
			return {
				evalList: [],
				pageNo: 1,
				pageSize: 10,
				loadStatus: 'loadmore',
				hasMore: false,
				houseid: "",
			}
		},
		onLoad(options) {
			this.houseid = options.houseid;
		},
		onShow() {
			this.loadStatus = 'loadmore';
			this.hasMore = false;
			this.evalList = [];
			this.pageNo = 1;
			this.loadData()
		},
		onPullDownRefresh() {
			this.pageNo = 1;
			this.evalList = [];
			this.loadData(true);
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (this.hasMore) {
				this.pageNo = this.pageNo + 1;
				this.loadData();
			}
		},
		methods: {
			loadData(isReset) {
				this.loadStatus = 'loading';
				let obj = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					houseid: this.houseid
				}
				getReviewList(obj).then((res) => {
						uni.hideLoading();
						this.loadStatus = 'no-more';
						this.hasMore = res.data.hasMore;
						if (isReset) {
							this.evalList = res.data.records;
						} else {
							this.evalList = this.evalList.concat(res.data.records);
						}
					})
					.catch((res) => {
						this.loadStatus = 'no-more';
						uni.hideLoading();
						showFailure();
					});
			},
			handleReply(item){
				console.log(item)
				uni.navigateTo({
					url:"/pages/review/reply?reviewid="+item.reviewid
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.preview-list {
		.empty {
			text-align: center;
			padding-bottom: 120rpx;

			image {
				width: 376rpx;
				height: 376rpx;
			}

			p {
				font-size: 28rpx;
				color: #999999;
			}
		}

		ul {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 30rpx 60rpx;

			li {
				margin-bottom: 24rpx;

				.eval_top {
					dl {
						display: flex;
						align-items: center;

						dt {
							image {
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
								background: #eeeeee;
							}
						}

						dd {
							padding-left: 16rpx;
							width: 85%;

							.eval_title {
								display: flex;
								align-items: center;
								justify-content: space-between;

								p {
									font-family: Microsoft YaHei UI;
									font-size: 28rpx;
									color: #333333;
									line-height: 13rpx;
								}

								text {
									font-family: Microsoft YaHei UI;
									font-size: 20rpx;
									color: #BBBBBB;
									line-height: 13rpx;
								}
							}

							.eval_rate {
								margin-top: 14rpx;
								display: flex;
								align-items: center;

								text {
									font-family: Microsoft YaHei UI;
									font-weight: 400;
									font-size: 24rpx;
									color: #333333;
									line-height: 28rpx;
								}
							}
						}
					}
				}

				>p {
					padding: 16rpx 0;
					font-family: Microsoft YaHei UI;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 30rpx;
				}

				.eval_img {
					display: flex;

					image {
						width: 190rpx;
						height: 190rpx;
						background: #eeeeee;
						margin-right: 10rpx;
					}
				}

				.eval_huifu {
					width: 92%;
					height: 60rpx;
					background: #F0F0F0;
					border-radius: 30rpx;
					margin-top: 20rpx;
					padding: 0 30rpx;
					line-height: 60rpx;
					color:#999999;
					font-size: 24rpx;
				}

				.eval_reply {
					width: 96%;
					margin-top: 20rpx;
					padding: 10rpx;
					font-size: 20rpx;
					color: #999999;
					line-height: 28rpx;
					background: #F7F7F7;
				}
			}
		}
	}
</style>